Vue Fes Japan 2018

https://gyazo.com/6f72bb258fc1196e77ab9426c642c816

2018/11/3 10:20〜20:00

N35.7004201,E139.7722717,Z17 秋葉原UDX

Vue3.0のアップデート内容について

Vueロンドンにて開発内容を発表

Mediumでも発表してる

Vue3.0では

より速く

mount

patch

2.0と比較して2倍くらいになってる

既存のインターフェイスはそのまま

プロキシを用いた監視で言語レベル＆速度向上

監視していて変更されたら通知

プロパティの追加と削除

ネイティブプロキシによるプロパティプロキシの高速化

実行中のオーバーヘッド削除のためコンパイル時にヒントを追加

JSへのコンパイルも改善

コンポーネント探索の高速化＋単型の呼び出し＋小要素の種類を抽出

不要な条件分岐を省略

JSエンジンが最適化しやすくする

コンポーネントはコンポーネントであることを認識させる必要がある

これをコンパイラが行い、速度向上

子要素がない場合も改善される

スロット生成の最適化

インスタンスが依存関係を正しくトラッキング

不要な親/子のレンダリングを回避

子をレンダリングするとき、親には変化がない

スロットのレンダリングを遅延させることでデータの依存関係がちゃんととれる

Static Tree Hosting

静的ツリーの巻き上げ

Virtual DOMで同じものだった場合はレンダーを省略

ノード自体へのpatch適用は省略するが子要素は実施する

静的要素と属性はキャッシュ

Inline Handler Hosting

インラインハンドラの巻き上げ

異なるインライン関数のための再描画は省略できる

100%高速化&使用メモリ半減

インスタンスの初期化のパフォーマンスが改善

より小さく

ビルトインコンポーネント

ディレクティブのヘルパー

ユーティリティ関数

コンパイラが自動的にビルド

gzipで10kb以下

よりメンテナンスしやすく

アーキテクチャの整理

パッケージの分離

実行環境に依存しない

ユーザからは１つのパッケージとして扱える

テストセットアップの改善

ランタイムテストを動かすのも簡易的に

よりネイティブ向けに

カスタムレンダラーAPIの提供

より保守性を向上

リアクティビティAPI

2.0ではデータをコンポーネント内に入れなければならなかったが

3.0では分離できる

コンポーネントの再描画の理解

Render Track

クラスのコンポーネントとAPIをネイティブに扱える

TSXでrender関数を扱える

propsの型も見れる

propsを忘れたら警告を出す

実験的機能

ロジックの梱包が簡易的に

複数で使うとネームスペース問題が発生することがある

Time Slicing

同じくReactでの開発が進められている

同じイベント処理が走ったら1回目以降をスキップし、描画を高速化させることができる

プラチナスポンサーセッション

管理画面上で650 Vueコンポーネント数

コミュニティへの貢献も行ってる

Vue.js入門の著者野田さん

Vue-meetupでEvan氏とオンラインチャット

ランチセッション

なぜアニメーションが必要なのか

シームレスな動きを行う

新しい概念に対応できるようにはなってない

タイミング

ユーザーへの見え方を考慮しよう

SEOへの影響がある

理解しやすく

空間的に表現できるか

過剰なトランジションをなくそう

Paul Bakaus

https://gyazo.com/c90e47f8aae9e88d2212d365c4d66f77

モーフィング

どうやって実現していくか

さらなる改善

ウォッチャー・リアクティビティ

カスタムディレクティブ

ページトランジション

vue data vis

in-outとout-inを理解する

out-inが重要

CSSアニメーション

DRY（Don't Repeat Yourself）の原則

code:dry.scss

@mixin ballb($yaxis: 0) {

transform: translate3d(0, $yaxis, 0);

}

@keyframes bouncein {

1% { @include ballb(-400px); }

20%, 40%, 60%, 80%, 95%, 99%, 100% { @include ballb() }

30% { @include ballb(-80px); }

50% { @include ballb(-40px); }

70% { @include ballb(-30px); }

90% { @include ballb(-15px); }

97% { @include ballb(-10px); }

}

.bouncein {

animation: bouncein 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;

}

.ballmove-enter {

@include ballb(-400px);

}

JSによるアニメーション

バインディングで制御できる

重くならないためにFLIP

First

Last

Invert（逆転）

Play

transtion-group

リアクティブな仕組みを活用してみよう

ウォッチャーとトランジション

SVGとの相性がいい

リアクティブプログラミングを導入すると、イベントに対して、ステートの更新が簡単になる。

TweenMaxでは直接の表示オブジェクトの値をトゥイーンさせるのではなく、ダミーオブジェクトで管理するといった手法もある。

ダミーオブジェクトの値を、Vueのwatchで反映させればいい。

ステート駆動アニメーション

code:vuex-animation.vue.html

<transition @leave="leaveDialog" :css="false">

<app-dialog v-if="showWeather"></app-dialog>

</transition>

<transition @leave="leaveDroparea" :css="false">

<g v-if="showWeather">

<app-droparea v-if="template == 1"></app-droparea>

<app-windarea v-else-if="template == 2"></app-windarea>

<app-rainbowarea v-else-if="template == 3"></app-rainbowarea>

<app-tornadoarea v-else></app-tornadoarea>

</g>

</transition>

<script>

export const store = new Vuex.Store({

state: {

showWeather: false,

template: 0

},

mutations: {

toggle: state => state.showWeather = !state.showWeather,

updateTemplate: (state) => {

state.showWeather = !state.showWeather;

state.template = (state.template + 1) % 4;

}

}

});

</script>

カスタムディレクティブ

code:custom-01.vue.js

Vue.directive('tack', {

bind(el, binding, vnode) {

el.style.position = 'fixed'

}

});

<p v-tack="70">

code:custom-02.vue.js

Vue.directive('tack', {

bind(el, binding, vnode) {

el.style.position = 'fixed'

el.style.top = binding.value + 'px'

}

});

引数などでより詳細にできる

<p v-tack="{ top: '40', left: '100' }">

code:custom-03.vue.js

Vue.directive('tack', {

bind(el, binding, vnode) {

el.style.position = 'fixed';

el.style.top = binding.value.top + 'px';

el.style.left = binding.value.left + 'px';

}

});

アニメーションにも導入できるのでは？

code:anime.js

new Vue({

el: '#app',

methods: {

handleScroll: function(evt, el) {

if (window.scrollY > 50) {

TweenMax.to(el, 1.5, {

y: -10,

opacity: 1,

ease: Sine.easeOut

})

}

return window.scrollY > 100;

}

}

});

<div class="box accelerate impact" v-dscroll="totalImpact">

code:d3.js

export default {

methods: {

totalImpact: function(evt, el) {

if (window.scrollY > 1100) {

TweenMax.to(el, 0.75, {

opacity: 0

})

let circ = d3.selectAll("circle")

.attr("cx", function(d) {

if (lat.includes("E")) {

return midX - parseInt(lat) * incByW;

} else {

return midX + (parseInt(lat) * incByW);

}

})

...

.attr("r", 5)

.attr("fill", "url(#radgrad)")

}

return window.scrollY > 1300;

},

<nuxt-link to="">

JSフックもできる

code:js-hooks.js

export default {

transition: {

mode: 'out-in',

css: false,

enter (el, done) {

...

}

...

ネイティブアプリ風のトランジション

code:store/index.js

import Vuex from 'vuex'

const createStore = () => {

return new Vuex.Store({

state: {

page: 'index'

},

mutations: {

updatePage(state, pageName) {

state.page = pageName

}

}

})

}

export default createStore

code:middleware/page.js

export default function(context) {

// go tell the store to update the page

context.store.commit('updatePage', context.route.name)

}

code:nuxt.config.js

module.exports = {

...

router: {

middleware: 'pages'

},

...

}

サーバーレス

ミスリーディングな名前だけど面白い（サラ曰く）

FaaS

Google Map APIを使ってみた

Vueを使うと、複雑で美しいインタラクションをとても簡単に作成できる上、ユーザーにとってもシームレスな体験を提供できる。

アプリ内の変化に対して、状態をつなげ、認知させる労力を減らすことが簡単にできる。

いずれは他エディタでも対応したい

デザインと実装が分離されているのがつらい

デザイナーがつくったデザインファイルをみて

エンジニアが実装

問題

どのデザインデータがどのソースに当たるのか確認で二度手間になる

運用フェーズで急に要素を実装する時デザインデータに反映し忘れ

レスポンシブ時どうなるかの想定

デザイナー

UX,、IA、アクセシビリティ、スタイルガイド

開発者

コード設計、状態管理、レスポンシブ、アニメーション実装

プロトタイプでしかできなさそう

@ktsnさんの考える（ほしい）デザインツール

SFCファイルで実装かつデザイン

長期開発、運用

動的なデザイン

直近の目標

基礎をつくる

開発者が使って便利

GUI完結ではなくコードと並べる

実装

サーバー

SFC（コンポーネント）

唯一のデータ

開発の任意のフェーズで使える

プレビューのレンダリング

意味解析

あたってるスタイル

GUIの操作との対応付

コード編集・生成

クライアント

レンダラーでGUIにする

GUI操作したら再レンダリング

web sokectで解析・コード生成でサーバーにわたす

実装はされたけど、今後もこの体制にしていく

他エディタにも適応したい

デザイナ向けにスタンドアローン版を作る

hostにつないで共同編集

デバックも楽

ブラウザでも確認可能

Chromeだとvue dev tool

SFCの静的解析

ライブラリ

未来の構文を使えるようにするため

プリプロセッサ

TypeScriptのみサポート

レンダラーの再実装

描画するだけじゃなくて任意の処理を挟むため

dndでのUI構築

ガイド表示

ノードの選択

実装してみてどうだったか

おおよそは実装した

意外とエッジケースが多い

考慮することがあった

Vueのレンダラを使う方法も模索していきたい

開発者が使って便利なものにする

Preview tool of SFC

ブラウザ上で編集したのをコードにもってくるのを１つで完結させたい

Layouting tool

アイデア

デザイナーと開発者がGitHubで同じコードを編集

コンポーネントカタログの自動生成

まとめ

デザインと実装が分かれることのつらみ

それを統合したい

SFCが実装、かつ、デザイン

長期開発・運用に使える

動的なデザイン

まずは開発者が便利に使えるように開発

将来的にはデザイナーも使えるようにする

Co-founder

日本の利用は世界で第3位

1位：中国

2位：アメリカ

Vue.jsのフレームワーク

インストール

npx create-nuxt-app <project-name>

サーバーサイド

UIフレームワーク

レンダリングモード

Universal Mode

nuxt

nuxt build

nuxt start

Static Generate

nuxt

nuxt generate

nuxt --spa

nuxt build --spa

パッケージマネージャ

Nuxt2.0になった

CLIの改善

より速いビルド

起動34%向上

コンパイル速度も45%向上

コードスプリッティングの制御

build.splitChunksの使用

バンドルの分離

クライアント、サーバーで分離

nuxt-start

ランタイム限定

ESモジュール対応

nuxt.config.jsから直接記述できるように

v2.3.0

モダンブラウザー向けビルド

--modern

内部リファクタリング

Q. Vue3.0の追従は大丈夫か？

A. リポジトリにはアクセスできるようになってて追従している。Vue3.0が出る前にはNuxt3.0が出るかも

1. 移行のモチベーション

2014リリース

要件がそれなりに複雑

2-way binding

サーバーサイドはAPIに専念

エンジニア採用目的

to Cでは珍しい選択だった

課題

初期表示速の遅さ

技術的制約

Angular.js 1系がSSRをサポートしてなかった

Railsにのったフロントエンド

技術的負債

既存の技術の延長で解決できそうにはない

表示速度は正義

経営視点でのフルリニューアル

なかなか難しいように思われたが…

CEOとCXOからGOサインがでる

2018/3に刷新スタート

選定要件

SSR

学習・運用コスト

ガチでなくてもメンテナブルに

情報収集コスト

候補

実行速度と開発効率の両立

学習コストの低さと親しみやすさがある

ドキュメントの充実度

コミュニティの活発度

エキスパートがコンサルになった

@kitakさん

SSRやるときはどうするの？

Nuxtを採用

採用理由

SSRが楽

ディレクトリ構成などの規約がある

モダン環境が手に入る

2. 移行計画

手順

既存UIを確実に移行

ページごとにパス（URL）ベースでLBで振り分ける

苦労ポイント

並行して現行版の改修は続いてる

移行が完全に完了するまでは二重メンテ

進捗

おすすめ一覧ページ

検索ページ

記事詳細（デモアカウント）

コンポーネント数：216

行数：43600~

比較

パフォーマンス向上（3 => 41）

画像の最適化もするとよい

Start Render, Speed Indexが1/2

3. 設計・実装のトピック

開発環境

Nuxt 2.2.0

Jest

ESLint

Prettier

CircleCI

コンポーネント設計

Angular版

directiveを利用

粒度にルールがない

propsのバケツリレー

仕組みとルールがほしい

モジュールモードを採用

肥大化問題

actions, mutation getters ... が各分割できるように

actionsが集中してた

定数を利用

ストアに状態をもたせるかどうか

コンポーネントをこえるものがあるか

Service的な使い方

APIの呼び出し

components

atoms

内部に他のものを含めない

再利用性、stateless

molecules

内部にAtoms以外含まない

再利用性、Stateless

organisms

Vuexモジュールを参照できる

最初は手探りでやってみた

導入効果

レイヤーの責務がある程度明確に

レイヤーの名称で共有できるように

コンポーネントの視認性問題

一度挫折した

Nuxtとの互換性

コンポーネントの修正でストーリーをメンテナンス

Vuexモジュールや通信周りのスタブ化

ver4.0だとNuxt2もつかえる

対象をAtomes,Moleculesに集中する

Unversal JavaScript

問題

code:ssr.js

const JSDOM = jsdom.DOM

const dom = new JSDOM()

global.document = dom.window.document

SSRライフサイクル

ファイルサイズの圧縮

nuxt build --analyze

highlight.js

言語を絞った

moment.js

採用のモチベ

インフラ

リクエストをトリガーをトリガー

aws-serverless-expree

Node.jsの運用ノウハウ０

まとめ

パスベースで小さくするのは有効

言語やフレームワークの制約がない

ロールバック・ドッグフーティングが容易

改善完了するまでは２重タスクになる

SSR導入が簡単になった

環境基盤のサポートと規約が非常に強い

既存のVueアプリケーションのやりかた

vue-init

欠点

テンプレートが多い

Scaffolding

Ejectしかできない

アップグレードが困難

新しい仕組みが必要

yarn global add @vue/cli

何が違うか

プラグインベースの新しいアーキテクチャ

VueCLI 3.0 の最終ゴールはスタンダードなビルド用ツールチェインに

vue create

テンプレートは不要になった

プラグインを使用するように

プロジェクトを作り、必要なものを選ぶだけ

プラグインのアップグレードですぐアップグレードできる

作成

開発

プロダクションビルド（ランタイム）

デプロイ

コミュニティプラグイン

275以上のプラグインが利用可能

Vue CLI UI

vue ui

CLIなのにGUIってなんでだよ

vue cli 3.0は実は結構複雑

選択肢

コマンド

オプション

アクセシビリティ重視なツールを実現するため

豊富なコンテキスト情報

詳細な説明

検索性の向上

プロンプトUIの向上

ローカライゼーション

not Wifi use it.

今後の話

Vueのアップグレード追従

エラー表示の改善

設定ページ

ショートカットキー

グローバルGUI API